import { useRef } from "react"
import ListItem from "../ListItem"

type IMemberList = {
    data: Record<string, any>[],
    birth?: boolean,
    setPage?: React.Dispatch<React.SetStateAction<number>>,
    getPage?: React.RefObject<boolean>;
    selecte?: (index: any, value: boolean) => void
}

function MemberList({ data, birth, setPage, getPage, selecte }: IMemberList) {
    const total = useRef<HTMLDivElement>(null)
    const box = useRef<HTMLDivElement>(null)
    console.log(data)

    return (
        <>
            <div
                className="overflow-auto flex-1"
                ref={box}
                onScroll={(e) => {
                    if (getPage?.current
                        && !birth
                        && total.current
                        && box.current
                        && setPage
                        && box.current.offsetHeight
                        + e.currentTarget.scrollTop
                        >= total.current.offsetHeight - 50
                    ) {
                        getPage.current = false
                        setPage(prev => prev + 1)
                    }
                }}
            >
                <div ref={total}>
                    {data.map((item, index) => {
                        return <ListItem
                            data={item}
                            birth={birth}
                            key={item.id}
                            index={index}
                            selecte={selecte}
                        />
                    })}
                </div>
            </div>
        </>
    )
}
export default MemberList